/* 材质填充 */
@utility bg-primary-fill-vibrant {
  @apply bg-primary-fill-vibrant-light;
}
@utility bg-secondary-fill-vibrant {
  @apply bg-secondary-fill-vibrant-light;
}
@utility bg-tertiary-fill-vibrant {
  @apply bg-tertiary-fill-vibrant-light;
}

/* 材质填充浅色 */
@utility bg-primary-fill-vibrant-light {
  background: linear-gradient(0deg, #3d3d3d, #3d3d3d), rgba(127, 127, 127, 0.5);
  background-blend-mode: overlay, luminosity;
}
@utility bg-secondary-fill-vibrant-light {
  background: linear-gradient(
      0deg,
      rgba(61, 61, 61, 0.5),
      rgba(61, 61, 61, 0.5)
    ),
    rgba(127, 127, 127, 0.4);
  background-blend-mode: overlay, luminosity;
}
@utility bg-tertiary-fill-vibrant-light {
  background: linear-gradient(
      0deg,
      rgba(61, 61, 61, 0.5),
      rgba(61, 61, 61, 0.5)
    ),
    rgba(127, 127, 127, 0.2);
  background-blend-mode: overlay, luminosity;
}

/* 材质填充深色 */
@utility bg-primary-fill-vibrant-dark {
  background: linear-gradient(0deg, #c2c2c2, #c2c2c2), rgba(127, 127, 127, 0.5);
  background-blend-mode: overlay, luminosity;
}
@utility bg-secondary-fill-vibrant-dark {
  background: linear-gradient(
      0deg,
      rgba(194, 194, 194, 0.5),
      rgba(194, 194, 194, 0.5)
    ),
    rgba(127, 127, 127, 0.4);
  background-blend-mode: overlay, luminosity;
}
@utility bg-tertiary-fill-vibrant-dark {
  background: linear-gradient(
      0deg,
      rgba(194, 194, 194, 0.5),
      rgba(194, 194, 194, 0.5)
    ),
    rgba(127, 127, 127, 0.2);
  background-blend-mode: overlay, luminosity;
}
